Computed Properties কী এবং কেন প্রয়োজন?

Computed Properties (কম্পিউটেড প্রপার্টিজ) হল Ember.js এর একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে প্রপার্টির মান অটোমেটিকভাবে পুনঃগণনা করতে সাহায্য করে, যখন নির্ভরশীল প্রপার্টির মান পরিবর্তিত হয়। এটি বিশেষত ব্যবহৃত হয় যখন আপনি এমন প্রপার্টি চান, যার মান নির্ভর করে অন্য কোনো প্রপার্টির মানের উপর, এবং যখন সেই মান পরিবর্তিত হয়, তখন নতুন মান স্বয়ংক্রিয়ভাবে গণনা হতে পারে।

Ember.js-এ computed properties কার্যকরীভাবে আপনার অ্যাপ্লিকেশনের state management সহজ করে তোলে, কারণ আপনি নির্দিষ্ট শর্ত অনুযায়ী প্রপার্টির মান কম্পিউট বা রেন্ডার করতে পারেন।

Computed Properties কী?

Computed Properties হল সেই প্রপার্টি যেগুলোর মান dynamically গণনা করা হয় অন্য প্রপার্টির মান পরিবর্তিত হলে। যখন নির্ভরশীল প্রপার্টি পরিবর্তিত হয়, তখন কম্পিউটেড প্রপার্টি স্বয়ংক্রিয়ভাবে পুনর্গণনা হয়।

সাধারণ উদাহরণ:

ধরা যাক, আপনি একটি অ্যাপ্লিকেশনে ব্যবহারকারীর নাম এবং শেষ নামের ভিত্তিতে পূর্ণ নাম গণনা করতে চান। এই ক্ষেত্রেও computed property ব্যবহার করা যেতে পারে।

Computed Properties ব্যবহার করা

Ember.js-এ computed properties ব্যবহৃত হয় @computed ডেকোরেটর বা Ember.computed ফাংশন দিয়ে। তবে, Ember Octane সংস্করণ থেকে আমরা tracked properties ব্যবহার করে এই কাজটি সহজভাবে করতে পারি, যা স্বয়ংক্রিয়ভাবে পুনর্গণনা হয় যখন নির্ভরশীল প্রপার্টির মান পরিবর্তিত হয়।

১. Ember.computed (Legacy Version)

Ember.js এর পুরনো সংস্করণে Ember.computed ফাংশনটি ব্যবহৃত হত। এই ফাংশনটি কম্পিউটেড প্রপার্টি তৈরি করতে ব্যবহৃত হয়।

// app/controllers/application.js
import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default class ApplicationController extends Controller {
  firstName = 'John';
  lastName = 'Doe';

  fullName = computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  });
}

এখানে, fullName কম্পিউটেড প্রপার্টি, firstName এবং lastName প্রপার্টির উপর নির্ভরশীল। যখন প্রথম নাম বা শেষ নাম পরিবর্তিত হয়, fullName প্রপার্টির মানও পরিবর্তিত হবে।

২. Tracked Properties (Ember Octane)

Ember Octane সংস্করণে tracked প্রপার্টি ব্যবহার করা হয়, যা আরও আধুনিক এবং কার্যকরী পদ্ধতি। এখানে, @tracked ডেকোরেটর দ্বারা আমরা কম্পিউটেড প্রপার্টি তৈরি করতে পারি।

// app/controllers/application.js
import Controller from '@glimmer/controller';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  @tracked firstName = 'John';
  @tracked lastName = 'Doe';

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

এখানে, fullName একটি গেটার ফাংশন হিসেবে কাজ করছে এবং যখন firstName বা lastName পরিবর্তিত হবে, তখন fullName অটোমেটিক্যালি রিফ্রেশ হবে।

Computed Properties কেন প্রয়োজন?

১. ডাইনামিক মান গণনা

কম্পিউটেড প্রপার্টির প্রধান সুবিধা হল যে আপনি ডাইনামিকভাবে মান গণনা করতে পারেন এবং যখন নির্ভরশীল প্রপার্টির মান পরিবর্তিত হবে, তখন কম্পিউটেড প্রপার্টির মানও স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।

২. কোড পুনঃব্যবহারযোগ্যতা বৃদ্ধি

কম্পিউটেড প্রপার্টি ব্যবহারের মাধ্যমে, আপনি একটি নির্দিষ্ট লজিক এক জায়গায় সংজ্ঞায়িত করতে পারেন এবং সেই লজিকটি বিভিন্ন স্থানে ব্যবহার করতে পারেন। এটি কোডের পুনঃব্যবহারযোগ্যতা এবং মেইন্টেনেবিলিটি বৃদ্ধি করে।

৩. UI এর সিঙ্ক্রোনাইজেশন সহজ করা

Ember.js-এ computed properties ব্যবহার করে, আপনি সহজেই আপনার UI-কে ডেটার সাথে সিঙ্ক্রোনাইজ করতে পারবেন। যখন কম্পিউটেড প্রপার্টির নির্ভরশীল প্রপার্টি পরিবর্তিত হবে, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

৪. স্টেট ম্যানেজমেন্ট

কম্পিউটেড প্রপার্টি ব্যবহার করে, আপনি অ্যাপ্লিকেশনের state সহজভাবে পরিচালনা করতে পারেন, কারণ এর মাধ্যমে আপনি UI এবং ডেটার মধ্যে একটি শক্তিশালী সম্পর্ক স্থাপন করতে পারবেন।

৫. অন্যান্য ডেটার সাথে সম্পর্ক তৈরি

কম্পিউটেড প্রপার্টি ব্যবহার করে, আপনি একাধিক প্রপার্টির মধ্যে সম্পর্ক তৈরি করতে পারেন এবং এক প্রপার্টির মান পরিবর্তিত হলে অন্য প্রপার্টি স্বয়ংক্রিয়ভাবে আপডেট করতে পারেন।

Computed Properties এর কিছু সাধারণ ব্যবহার

1. ফর্ম্যাটিং ডেটা: কম্পিউটেড প্রপার্টি ব্যবহার করে আপনি সহজে ডেটা ফরম্যাট করতে পারেন। যেমন, তারিখ বা টাকার মান ফরম্যাট করা।

   // app/controllers/application.js
   import Controller from '@glimmer/controller';
   import { tracked } from '@glimmer/tracking';
   
   export default class ApplicationController extends Controller {
     @tracked price = 1000;
   
     get formattedPrice() {
       return `$${this.price.toFixed(2)}`;
     }
   }
   

2. সংখ্যার উপর নির্ভরশীল গণনা: একাধিক সংখ্যার উপর ভিত্তি করে নতুন সংখ্যা তৈরি করতে কম্পিউটেড প্রপার্টি ব্যবহার করা যেতে পারে।

   // app/controllers/application.js
   import Controller from '@glimmer/controller';
   import { tracked } from '@glimmer/tracking';
   
   export default class ApplicationController extends Controller {
     @tracked num1 = 10;
     @tracked num2 = 20;
   
     get sum() {
       return this.num1 + this.num2;
     }
   }
   

Computed Properties হল Ember.js এর একটি শক্তিশালী ফিচার যা আপনাকে ডাইনামিকভাবে প্রপার্টির মান গণনা করতে সাহায্য করে। যখন নির্ভরশীল প্রপার্টির মান পরিবর্তিত হয়, তখন কম্পিউটেড প্রপার্টি স্বয়ংক্রিয়ভাবে আপডেট হয়, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে। Tracked properties এর সাহায্যে কম্পিউটেড প্রপার্টি তৈরি করা বর্তমানে আরও সহজ এবং আধুনিক হয়ে উঠেছে, যা আপনার অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট এবং UI সিঙ্ক্রোনাইজেশনকে উন্নত করতে সাহায্য করে।